<template>
  <n-form
		ref="formRef"
		:model="props.formData"
		:rules="props.rules"
		label-width="80px"
		label-placement="left"
		:style="{
			maxWidth: '340px',
		}">
		<n-form-item label="班级名称" path="name">
			<n-input v-model:value="props.formData.name" placeholder="请输入姓名" />
		</n-form-item>
		<n-form-item label="开班日期" path="createDate">
			<n-date-picker
				v-model:formatted-value="props.formData.createDate"
				value-format="yyyy-MM-dd"
				type="date"
				placeholder="请输入开班日期"
				/>
		</n-form-item>
		<n-form-item label="结课日期" path="endDate">
			<n-date-picker
				v-model:formatted-value="props.formData.endDate"
				value-format="yyyy-MM-dd"
				type="date"
				placeholder="请输入结课日期"
				/>
		</n-form-item>
		<n-form-item>
			<n-button type="primary" size="small" @click="save">保存</n-button>
		</n-form-item>
	</n-form>
</template>

<script setup>
import { ref } from 'vue'
const formRef = ref()
const props = defineProps({
	formData: {
		type: Object,
		required: true
	},
	rules: {
		type: Object,
		required: true
	},
	save: {
		type: Function,
		required: true
	}
})
defineExpose({
	formRef
})
function save () {
	props.save()
}
</script>

<style scoped lang="scss">
</style>